<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>runtime-dom</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="../node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script>
    <script>
      let { createApp, h, reactive } = VueRuntimeDOM;
      // 定义的appComponent 组件
      let appComponent = {
        setup(props, context) {
          let state = reactive({ flag: true });
          setTimeout(() => {
            state.flag = false;
          }, 1000);
          return () => {
            return state.flag
              ? h("div", { style: { color: "red" } }, [
                  h("li", { key: "a" }, "a"),
                  h("li", { key: "b" }, "b"),
                  h("li", { key: "c" }, "c"),
                  h("li", { key: "d" }, "d"),
                  h("li", { key: "e" }, "e"),
                  h("li", { key: "w" }, "w"),
                  h("li", { key: "f" }, "f"),
                  h("li", { key: "g" }, "g"),
                ])
              : h("div", { style: { color: "green" } }, [
                  h("li", { key: "a" }, "a"),
                  h("li", { key: "b" }, "b"),
                  h("li", { key: "e" }, "e"),
                  h("li", { key: "c" }, "c"),
                  h("li", { key: "d" }, "d"),
                  h("li", { key: "h" }, "h"),
                  h("li", { key: "f" }, "f"),
                  h("li", { key: "g" }, "g"),
                ]);
          };
        },
      };
      // 组件中的render方法，可以渲染一个虚拟节点，将虚拟节点挂载到dom上
      let app = createApp(appComponent, {
        name: "diff1",
        value: "value",
      });
      app.mount("#app");
    </script>
  </body>
</html>
